<script lang="ts" setup>
import useEcharts from '@/hooks/useEcharts'
import { downloadPng } from './downloadpng'
const chartId = "barChart";
const options = {
  xAxis: {
    data: ["A", "B", "C", "D", "E", "F"],
  },
  yAxis: {},
  //图例
  legend: {
    data: ["数量"],
    orient: "horizontal", // 设置图例的布局方式为水平
    x: "center", // 设置图例的水平位置
    y: "bottom", // 设置图例的垂直位置
  },
  label: {
    show: true, // 是否显示 label
    position: 'top', // label 的位置，可选：'top'（上方），'inside'（内部），'bottom'（下方）
    formatter: '{c}', // 格式化 label 的显示内容，这里使用 {c} 表示数据值
    color: '#000', // label 的字体颜色
    fontSize: 12 // label 的字体大小
  },
  series: [
    {
      name: "数量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};
const { chart, updateChart } = useEcharts(chartId, options);



</script>

<template>
  <el-card style="width: 480px">
    <template #header>
      <div class="card-header">
        <span>业绩柱状图</span>
        <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
          <el-icon @click="downloadPng(chart, '业绩柱状图ba')">
            <Download />
          </el-icon>
        </el-tooltip>
      </div>
    </template>
    <div :id="chartId" :style="{ width: '440px', height: '400px' }"></div>
  </el-card>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>